<template>
  <div style="padding:5px 15px; ">
    <div id="monthChart" ref="lineChart" style="height:20vh;" />
  </div>
</template>

<script>
import { bnrQuery } from '../../api/dataApi'
import { EventBus } from '../../../utils/eventBus.js'
export default {
  data() {
    return {
      personD: [],
      psname: '',
      colorList: ['#eee15f', '#0393f3', '#09f2ed', '#0ce889'],
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
      ],
    }
  },

  watch: {
    personD: {
      handler() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
    // psname(val) {
    //   this.getData(val)
    // },
  },
  mounted() {
    this.initChart()
    EventBus.$on('setPerson', (param1) => {
      this.psname = param1
      this.getData(this.psname)
    })
    //需要执行的代码
  },
  methods: {
    getData(val) {
      const that = this
      const header = {}
      header['report.tableid'] = 'main@d_person'
      header['psname'] = val
      const params = {
        '@params': JSON.stringify(header),
        _condition: {},
        pageSize: 99999,
        pageIndex: 0,
        sortField: '',
        sortOrder: '',
      }
      bnrQuery(params)
        .then((res) => {
          console.log('res', res)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
    },

    initChart() {
      const myChart = this.$echarts.init(this.$refs.lineChart)
      const option = {
        // legend: {
        //   top: 'bottom',
        // },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 70],
            center: ['40%', '45%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 4,
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 38, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
